<template>
	<view class="Global">

		<bgImage></bgImage>
		<MyNav :title="title" bgColor="" :backIcon="isback"></MyNav>

		<view class="body">
			<button class='button' hover-class="hover" @click='labelTest()'>标签案例</button>


		</view>
	</view>
</template>

<script>
	import MyNav from '@/components/customnavbar.vue'
	import bgImage from '@/components/backgroundImage.vue'


	var tsc = require("../../../components/utils/tsc.js");
	var encode = require("../../../components/utils/encoding.js");



	export default {
		components: {
			MyNav,
			bgImage


		},

		data() {
			return {
				title: '小票打印',
				isback: true,


				/**
				 * 页面的初始数据
				 */
				data: {
					looptime: 0,
					currentTime: 1,
					lastData: 0,
					oneTimeData: 0,
					buffSize: [],
					buffIndex: 0, //发送字节数下标
					printNum: [],
					printNumIndex: 0,
					printerNum: 1,
					currentPrint: 1,
					isLabelSend: false,
					isQuery: false,
					imageSrc: '/static/logo.png',
					jpgSrc: '/static/logo.png',
					canvasWidth: 100,
					canvasHeight: 100,
					jpgWidth: 200,
					jpgHeight: 200,
				},

				BLEInformation: {
					platform: "",
					deviceId: "",
					writeCharaterId: "",
					writeServiceId: "",
					notifyCharaterId: "",
					notifyServiceId: "",
					readCharaterId: "",
					readServiceId: "",
				},

				// 小票打印内容
				printData: {
					orderNo: "20241223H1S4",
					num: "1床",
					style: "标准款",
					color: "黄色",
					size: "S",
					zhaNum: "1",
					goodsNum: "10",
					qrCode: "123456",
					tips: "好好用"


				}
			}
		},

		onLoad: function(option) {

			/* let item = JSON.parse(decodeURIComponent(option.query.item));
			        console.log('传递数据',item);  // 打印出传递的复杂参数 */

			let item = JSON.parse(decodeURIComponent(option.item));
			this.BLEInformation = item
			// console.log('数据传递了', item, this.updateManagerData); // 打印出传递的复杂参数

			/* uni.showModal({
				title: '',
				content: JSON.stringify(this.BLEInformation),
				showCancel: false,
				cancelText: '',
				confirmText: '确认',
				success: res => {},
				fail: () => {},
				complete: () => {}
			}); */
		},

		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {
			var list = []
			var numList = []
			var j = 0
			for (var i = 20; i < 200; i += 10) {
				list[j] = i;
				j++
			}
			for (var i = 1; i < 10; i++) {
				numList[i - 1] = i
			}


			this.data.buffSize = list
			this.data.oneTimeData = list[0]
			this.data.printNum = numList
			this.data.printerNum = numList[0]
			this.initPhoto();
		},
		methods: {



			convertToGrayscale(data) {
				let g = 0
				for (let i = 0; i < data.length; i += 4) {
					g = (data[i] * 0.3 + data[i + 1] * 0.59 + data[i + 2] * 0.11)
					data[i] = g
					data[i + 1] = g
					data[i + 2] = g
				}
				return data
			},

			inArray(arr, key, val) {
				for (let i = 0; i < arr.length; i++) {
					if (arr[i][key] === val) {
						return i;
					}
				}
				return -1;
			},

			// ArrayBuffer转16进度字符串示例
			ab2hex(buffer) {
				var hexArr = Array.prototype.map.call(
					new Uint8Array(buffer),
					function(bit) {
						return ('00' + bit.toString(16)).slice(-2)
					}
				)
				return hexArr.join('');
			},

			// function convertToGrayscale(data) {
			//   let g = 0
			//   for (let i = 0; i < data.length; i += 4) {
			//     g = (data[i] * 0.3 + data[i + 1] * 0.59 + data[i + 2] * 0.11)
			//     data[i] = g
			//     data[i + 1] = g
			//     data[i + 2] = g
			//   }
			//   return data
			// }

			setPixel(data, offset, value) {
				data[offset] = value;
				data[offset + 1] = value;
				data[offset + 2] = value;
			},

			adjustPixel(data, offset, value) {
				data[offset] += value;
			},

			// 彩色图转成单色图
			convertToMonoImage(width, height, data, shake) {
				let g = 0
				let e = 0

				for (let i = 0; i < data.length; i += 4) {
					data[i] = (data[i] * 0.3 + data[i + 1] * 0.59 + data[i + 2] * 0.11);
				}

				for (let y = 0; y < height; y++) {
					for (let x = 0; x < width; x++) {
						let dataOffset = (width * y + x) * 4;
						g = data[dataOffset];
						if (g >= 150) { // 灰色转黑白的阈值, 可以调整打印效果
							e = g - 255;
							setPixel(data, dataOffset, 255);
						} else {
							e = g;
							setPixel(data, dataOffset, 0);
						}

						if (!shake)
							continue;

						if (x < width - 1 && y < height - 1) {
							//右边像素处理
							data[(width * y + x + 1) * 4] += 7 * e / 16;
							//下
							data[(width * (y + 1) + x) * 4] += 5 * e / 16;
							//右下
							data[(width * (y + 1) + x + 1) * 4] += e / 16;
							//左下
							if (x > 0) {
								data[(width * (y + 1) + x - 1) * 4] += 3 * e / 16;
							}
						} else if (x == width - 1 && y < height - 1) {
							//下方像素处理
							data[(width * (y + 1) + x) * 4] += 5 * e / 16;
						} else if (x < width - 1 && y == height - 1) {
							//右边像素处理
							data[(width * y + x + 1) * 4] += 7 * e / 16;
						}
					}
				}
				return data
			},


			initPhoto: function() { //初始化画布数据
				//创建一个png格式
				var that = this
				const ctx_out = uni.createCanvasContext('canvasOut', this);
				var png = that.data.imageSrc;
				uni.getImageInfo({
					src: png,
					success(res) {

						that.data.canvasWidth = res.width
						that.data.canvasHeight = res.height
						console.log("画布宽度" + res.width, "画布高度" + res.height);
						// ctx_out.setFillStyle('#ffffff')
						// ctx_out.setStrokeStyle('rgba(1,1,1,0)')
						// ctx_out.fill()
						//ctx_out.drawImage(png, 0, 0, res.width, res.height);
						ctx_out.drawImage(png, 0, 0);
						ctx_out.draw();
					}
				})
				//创建一个jpg格式图片
				const ctx_jpg = uni.createCanvasContext('canvasJPG', this);
				var jpg_width = that.data.jpgWidth;
				var jpg_height = that.data.jpgHeight;
				var img = that.data.jpgSrc;
				uni.getImageInfo({
					src: img,
					success(res) {

						that.data.jpgWidth = res.width
						that.data.jpgHeight = res.height
						console.log("JPG画布宽度" + res.width, "JPG画布高度" + res.height);
						ctx_jpg.drawImage(img, 0, 0, res.width, res.height);
						ctx_jpg.draw();
					}
				})
			},
			labelTest: function() { //标签测试

				var that = this;
				var canvasWidth = that.data.canvasWidth
				var canvasHeight = that.data.canvasHeight

				var command = tsc.createNew()
				command.setStripper("ON")

				// command.setHome()
				command.setCls() //清除缓冲区，防止下一个没生效
				command.setSize(58, 60) //设置标签大小，单位mm.具体参数请用尺子量一下
				// command.setGap(0) //设置两个标签之间的间隙，单位mm.具体参数请用尺子量一下
				command.setCls() //清除缓冲区

				command.setGap(20)
				// command.setHome()
				// command.setBox(10, 10, 464, 230, 5) //绘制一个边框
				// command.setBar(10, 75, 455, 5); //绘制一条黑线
				/* 	command.setText(120, 20, "TSS24.BF2", 0, 1, 1, "订单:" + that.printData.orderNo) //绘制文字
					command.setText(120, 70, "TSS24.BF2", 0, 1, 1, "床号:" + that.printData.num) //绘制文字
					command.setText(120, 120, "TSS24.BF2", 0, 1, 1, "款号:" + that.printData.style) //绘制文字
					command.setText(120, 160, "TSS24.BF2", 0, 1, 1, "颜色:" + that.printData.color + " " + "尺码:" + that
						.printData.size) //绘制文字
					command.setText(120, 200, "TSS24.BF2", 0, 1, 1, "扎号:" + that.printData.zhaNum + " " + "件数:" + that
						.printData.goodsNum) //绘制文字

					command.setQrcode(150, 240, "L", 6, "A", "http://www.howbest.cn/cn/") //绘制一个二维码   */
				command.setText(150, 15, "TSS24.BF2", 0, 1, 1, "订单:" + that.printData.orderNo) //绘制文字
				command.setText(150, 50, "TSS24.BF2", 0, 1, 1, "床号:" + that.printData.num) //绘制文字
				command.setText(150, 85, "TSS24.BF2", 0, 1, 1, "款号:" + that.printData.style) //绘制文字
				command.setText(150, 120, "TSS24.BF2", 0, 1, 1, "颜色:" + that.printData.color + " " + "尺码:" + that
					.printData.size) //绘制文字
				command.setText(150, 155, "TSS24.BF2", 0, 1, 1, "扎号:" + that.printData.zhaNum + " " + "件数:" + that
					.printData.goodsNum) //绘制文字

				command.setQrcode(170, 190, "L", 6, "A", "http://www.howbest.cn/cn/") //绘制一个二维码
				// command.setPrint(1)
				// command.setCut("BATCH")
				command.setText(150, 365, "TSS24.BF2", 0, 1, 1, "公司名称:" + that.printData.tips) //绘制文字
				command.setPagePrint() //执行打印指令


				/* uni.showModal({
					title: '1标签',
					content: JSON.stringify(command.getData()),
					showCancel: false,
					cancelText: '',
					confirmText: '1标签',
					success: res => {},
					fail: () => {},
					complete: () => {}
				}); */
				that.isLabelSend = true
				that.prepareSend(command.getData())
			},
			printPhoto: function() { //打印bitmap，图片内容不建议太大，小程序限制传输的字节数为20byte
				var that = this;
				var canvasWidth = that.data.canvasWidth
				var canvasHeight = that.data.canvasHeight
				var command = tsc.createNew()
				command.setCls()
				command.setSize(30, 30)
				command.setGap(0)
				command.setCls()
				uni.canvasGetImageData({
					canvasId: 'canvasOut',
					x: 0,
					y: 0,
					width: canvasWidth,
					height: canvasHeight,
					success: function(res) {
						console.log("获取画布数据成功")
						command.setBitmap(0, 0, 0, res)
						command.setPrint(1)
						that.prepareSend(command.getData()) //发送数据
					},
					complete: function(res) {
						console.log("finish")
					},
					fail: function(res) {
						console.log(res)
						uni.showToast({
							title: '获取画布数据失败',
							icon: 'none',
						})
					}
				})
			},
			printJPGPhoto: function() {
				var that = this;
				var canvasWidth = that.data.jpgWidth
				var canvasHeight = that.data.jpgHeight

				//抖动处理JPG图片
				const cfg = {
					x: 0,
					y: 0,
					width: canvasWidth,
					height: canvasHeight,
				}
				uni.canvasGetImageData({
					canvasId: 'canvasJPG',
					...cfg,
					success: (res) => {
						//const data = convertToGrayscale(res.data)
						const data = convertToMonoImage(res.width, res.height, res.data, true);
						uni.canvasPutImageData({
							canvasId: 'canvasJPG',
							data,
							...cfg,
							success: (res) => {
								console.log(res)
								console.log('deal graphic width: ' + cfg.width)
								console.log('deal graphic width: ' + cfg.height)
								that.printerJPG();
							},
							fail: (err) => {
								console.error(err)
							}
						})
					},
					fail: (err) => {
						console.error(err)
					}
				})
			},
			printerJPG: function() {
				var that = this;
				var canvasWidth = that.data.jpgWidth
				var canvasHeight = that.data.jpgHeight
				var command = tsc.createNew()
				command.setCls()
				command.setSize(30, 30)
				command.setGap(0)
				command.setCls()
				uni.canvasGetImageData({
					canvasId: 'canvasJPG',
					x: 0,
					y: 0,
					width: canvasWidth,
					height: canvasHeight,
					success: function(res) {
						console.log("获取画布数据成功")
						command.setBitmap(60, 0, 1, res)
						command.setPrint(1)
						that.prepareSend(command.getData()) //发送数据
					},
					complete: function(res) {
						console.log("finish")
					},
					fail: function(res) {
						console.log(res)
						uni.showToast({
							title: '获取画布数据失败',
							icon: 'none',
						})
					}
				})
			},

			prepareSend: function(buff) {
        //准备发送，根据每次发送字节数来处理分包数量
				//console.log(buff)
				var that = this
				var time = that.data.oneTimeData
				var looptime = parseInt(buff.length / time);
				var lastData = parseInt(buff.length % time);
				//console.log(looptime + "---" + lastData)


				that.data.looptime = looptime + 1
				that.data.lastData = lastData
				that.data.currentTime = 1
				that.Send(buff)
			},
			queryStatus: function() { //查询打印机状态
				var that = this
				var buf;
				var dateView;
				/*
				n = 1：传送打印机状态
				n = 2：传送脱机状态
				n = 3：传送错误状态
				n = 4：传送纸传感器状态
				*/
				buf = new ArrayBuffer(5)
				dateView = new DataView(buf)
				dateView.setUint8(0, 27)
				dateView.setUint8(1, 33)
				dateView.setUint8(2, 63)
				dateView.setUint8(3, 13)
				dateView.setUint8(4, 10)
				uni.writeBLECharacteristicValue({
					deviceId: that.BLEInformation.deviceId,
					serviceId: that.BLEInformation.writeServiceId,
					characteristicId: that.BLEInformation.writeCharaterId,
					value: buf,
					success: function(res) {
						console.log("发送成功")

						that.data.isQuery = true
					},
					fail: function(e) {
						uni.showToast({
							title: '发送失败',
							icon: 'none',
						})
						//console.log(e)
						return;
					},
					complete: function() {

					}
				})

				uni.notifyBLECharacteristicValueChange({
					deviceId: that.BLEInformation.deviceId,
					serviceId: that.BLEInformation.notifyServiceId,
					characteristicId: that.BLEInformation.notifyCharaterId,
					state: true,
					success: function(res) {
						uni.onBLECharacteristicValueChange(function(r) {
							console.log(
								`characteristic ${r.characteristicId} has changed, now is ${r}`
							)
							var result = ab2hex(r.value)
							console.log("返回" + result)
							var tip = ''
							if (result == 0) { //正常
								tip = "正常"
							} else if (result == 4) { //缺纸
								tip = "缺纸"
							} else if (result == 5) { //开盖、缺纸
								tip = "开盖、缺纸"
							} else if (result == 41) {
								tip = "开盖"
							} else if (result == 40) { //其他错误
								tip = "其他错误"
							} else { //未处理错误
								tip = "未知错误"
							}
							uni.showModal({
								title: '打印机状态',
								content: tip,
								showCancel: false
							})

						})
					},
					fail: function(e) {
						uni.showModal({
							title: '打印机状态',
							content: '获取失败',
							showCancel: false
						})
						console.log(e)
					},
					complete: function(e) {

						that.data.isQuery = false
						console.log("执行完成")
					}
				})
			},
			Send: function(buff) { //分包发送
				/* uni.showModal({
					title: '',
					content: JSON.stringify(buff),
					showCancel: false,
					cancelText: '',
					confirmText: '打印数据',
					success: res => {},
					fail: () => {},
					complete: () => {}
				}); */
				var that = this
				var currentTime = that.data.currentTime
				var loopTime = that.data.looptime
				var lastData = that.data.lastData
				var onTimeData = that.data.oneTimeData
				var printNum = that.data.printerNum
				var currentPrint = that.data.currentPrint
				var buf
				var dataView
				if (currentTime < loopTime) {
					buf = new ArrayBuffer(onTimeData)
					dataView = new DataView(buf)
					for (var i = 0; i < onTimeData; ++i) {
						dataView.setUint8(i, buff[(currentTime - 1) * onTimeData + i])
					}
				} else {
					buf = new ArrayBuffer(lastData)
					dataView = new DataView(buf)
					for (var i = 0; i < lastData; ++i) {
						dataView.setUint8(i, buff[(currentTime - 1) * onTimeData + i])
					}
				}
				//console.log("第" + currentTime + "次发送数据大小为：" + buf.byteLength)
				uni.writeBLECharacteristicValue({
					deviceId: that.BLEInformation.deviceId,
					serviceId: that.BLEInformation.writeServiceId,
					characteristicId: that.BLEInformation.writeCharaterId,
					value: buf,
					success: function(res) {
						if (currentPrint == printNum) {
							uni.showToast({
								title: '已打印第' + currentPrint + '张成功',
							})
						}
						//console.log(res)
					},
					fail: function(e) {
						uni.showToast({
							title: '打印第' + currentPrint + '张失败',
							icon: 'none',
						})

						//console.log(e)
					},
					complete: function() {
						currentTime++
						if (currentTime <= loopTime) {

							that.data.currentTime = currentTime
							that.Send(buff)
						} else {
							// uni.showToast({
							//   title: '已打印第' + currentPrint + '张',
							// })`
							if (currentPrint == printNum) {

								that.data.looptime = 0
								that.data.lastData = 0
								that.data.currentTime = 1
								that.data.isLabelSend = false
								that.data.currentPrint = 1

							} else {
								currentPrint++


								that.data.currentPrint = currentPrint
								that.data.currentTime = 1
								that.Send(buff)
							}
						}
					}
				})
			},



			/**
			 * 生命周期函数--监听页面显示
			 */
			onShow: function() {

			},


			buffBindChange: function(res) { //更改打印字节数
				var index = res.detail.value
				var time = this.data.buffSize[index]


				this.data.buffIndex = index
				this.data.oneTimeData = time
			},
			printNumBindChange: function(res) { //更改打印份数
				var index = res.detail.value
				var num = this.data.printNum[index]


				this.data.printNumIndex = index
				this.data.printerNum = num
			},


		}
	}
</script>

<style>
	.button {
		margin-top: 20rpx;
		width: 600rpx;
		height: 120rpx;
		background-color: #54bec2;
		color: white;
		border-radius: 20rpx;
		background: bg_red;
	}

	/* 按下变颜色 */
	.hover {
		background: #DCDCDC;
	}
</style>
